<script>

export default {
  name: 'DaoHang1',
  data () {
    return {
      dh: false,
      drawer: false
    }
  },
  methods: {
    gundong () {
      const scrollTop = window.scrollY
      this.dh = scrollTop > 50
    },
    tobowen () {
      location.href = '/bowen/'
    }
  },
  mounted () {
    window.addEventListener('scroll', this.gundong)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.gundong)
  }
}
</script>

<template>
  <div>
    <div class="daohang" :class="{dh:dh}" >
      <div class="mingpai">
        <h3><a href="/">B O K E</a></h3>
      </div>
      <div>
        <ul class="lie">
          <li class="hidden-sm-and-down" @click="tobowen"><i class="el-icon-notebook-1"></i> 博 文</li>
          <li class="hidden-sm-and-down">L I N K</li>
          <li class="el-icon-s-fold hidden-md-and-up" @click="drawer = true"></li>
        </ul>
      </div>
    </div>
    <el-drawer
      size="300px"
      :visible.sync="drawer"
      :with-header="false" class="ct">
      <div class="drawer">
        <side-card class="drawer_card"></side-card>
        <side-card2 class="sc2">
            <i class="el-icon-data-board">公 告</i>
            <p>因为还要忙毕业设计所以该项目暂且搁置，功能日后再完善</p>
          </side-card2>
        <dao-hang2></dao-hang2>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
$textcol: white;
* {
  margin: 0;
  padding: 0
}

.dh {
  background: rgba(0, 0, 0, .7);
}
.sc2{
  color: $textcol;
  font-size: 13px;
  margin-top: 0;
}
.ct{
  ::v-deep .el-drawer{
    background: linear-gradient(to top, #003153,20%,black)!important;
  }
}

.drawer {
  transition: all 0.5s;
  //height: 98vh;
  //overflow-y: hidden;
  height: 100%;

  .drawer_card {
    border: 0;
    border-radius: 0;
    &::before{
      border-radius: 0;
    }
  }
}

.daohang {
  transition: all .5s;
  height: 50px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: fixed;
  z-index: 10;

  .mingpai {
    //perspective: 300px
  }

  .mingpai a {
    font-size: 1.2rem;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #003153;
    margin-left: 50px;
    background: linear-gradient(white,#003153);
    border-radius: 20px;
    opacity: 1;
    line-height: 50px;
    transition: all .5s;
    @media (max-width: 700px) {
      margin-left: 25px;
    }

    &:hover {
      background: linear-gradient(to left top,white,10%,#003153,90%,white);
      height: 50px;
      border-radius: 10px;
      //transform: rotateY(360deg)
    }

    &:hover::before {
      position: absolute;
      text-align: center;
      border-radius: 10px;
      line-height: 50px;
      content: 'b o k e';
      color: white;
      width: 100%;
    }
  }

  .lie {
    font-weight: bold;
    transition: all .2s;
    margin-right: 50px;
    width: 150px;
    perspective: 700px;
    display: flex;
    justify-content: space-between;
    @media (max-width: 992px) {
      margin-right: -80px;
      font-size: 35px;
    };
    @media (max-width: 700px) {
      margin-right: -100px;
      font-size: 40px;
    }

    li {
      list-style: none;
      transition: all .5s;
      line-height: 50px;
      display: inline-block;
      color: #fff;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      a{
        color: #fff;
        text-decoration: none;
        &:hover{
        }
      }

      &:hover {
        color: #003153;
        transform: rotateY(30deg);
        border-bottom: 2px solid #fff;
      }
    }
  }
}
</style>
